<template>
  <div class='container'>
    <el-card class="box-card">
      <div
        slot="header"
        class="clearfix"
      >
        <span>试题录入</span>
      </div>
      <el-form
        ref="formFn"
        :model="formData"
        :rules="rules"
      >
        <!-- 学科 -->
        <el-form-item
          label="学科："
          prop="subjectID"
        >
          <el-select
            v-model="formData.subjectID"
            placeholder="请选择"
            style="width: 380px"
            @change="changeList"
          >
            <el-option
              v-for="obj in subjectList"
              :key="obj.value"
              :label="obj.label"
              :value="obj.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 目录 -->
        <el-form-item
          label="目录："
          prop="catalogID"
        >
          <el-select
            v-model="formData.catalogID"
            placeholder="请选择"
            style="width: 380px"
          >
            <el-option
              v-for="(obj,index) in directoryList"
              :key="index"
              :label="obj.label"
              :value="obj.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 企业 -->
        <el-form-item
          label="企业："
          prop="enterpriseID"
        >
          <el-select
            v-model="formData.enterpriseID"
            placeholder="请选择"
            style="width: 380px"
          >
            <el-option
              v-for="(obj,index) in companyList"
              :key="index"
              :label="obj.company"
              :value="obj.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 城市 -->
        <el-form-item label="城市：">
          <el-col
            :span="7"
            style="margin-left: -40px"
          >
            <el-form-item prop="province">
              <el-select
                @change="changeFn"
                v-model="formData.province"
                placeholder="请选择"
                style="width: 190px;"
              >
                <el-option
                  v-for="(obj,index) in provinceList"
                  :key="index"
                  :label="obj"
                  :value="obj"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="7"
            style="margin-left: -160px"
          >
            <el-form-item prop="city">
              <el-select
                v-model="formData.city"
                placeholder="请选择"
                style="width: 190px;"
              >
                <el-option
                  v-for="(obj,index) in cityList"
                  :key="index"
                  :label="obj"
                  :value="obj"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>
        <!-- 方向 -->
        <el-form-item
          label="方向："
          prop="direction"
        >
          <el-select
            v-model="formData.direction"
            placeholder="请选择"
            style="width: 380px"
          >
            <el-option
              v-for="(obj,index) in directionList"
              :key="index"
              :label="obj"
              :value="obj"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 题型 -->
        <el-form-item
          label="题型："
          prop="questionType"
        >
          <el-radio-group v-model="formData.questionType">
            <el-radio
              label="单选"
              @change="btnRadio"
            ></el-radio>
            <el-radio
              label="多选"
              @change="btnCheckbox"
            ></el-radio>
            <el-radio
              label="简答"
              @change="isAnswer"
            ></el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 难度 -->
        <el-form-item
          label="难度："
          prop="difficulty"
        >
          <el-radio-group v-model="formData.difficulty">
            <el-radio label="简单"></el-radio>
            <el-radio label="一般"></el-radio>
            <el-radio label="困难"></el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 题干 -->
        <el-form-item
          label="题干："
          prop="question"
        >
          <quill-editor
            class="editor"
            v-model="formData.question"
            ref="myQuillEditor"
            :options="editorOption"
          >
          </quill-editor>
        </el-form-item>
        <!-- 选项 -->
        <el-form-item
          label="选项："
          v-show="hidden"
        >
          <!-- 单选框 -->
          <el-radio-group
            v-model="selected"
            v-if="isShow"
            style="display: flex; flex-direction: column"
          >
            <el-radio
              style="margin-bottom:20px"
              v-for="(obj,index) in formData.options"
              :key="index"
              :label="index"
            >{{obj.code}}
              <el-input
                v-model='obj.title'
                style="width: 247px"
                type="text"
              ></el-input>
              <el-upload
                class="avatar-uploader"
                action="#"
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>

            </el-radio>
            <el-button
              style="width: 120px"
              type="danger"
              :disabled="disabled"
              size="small"
            >+增加选项与答案</el-button>
          </el-radio-group>

          <!-- 多选框 -->
          <el-checkbox-group
            v-model="selected"
            v-else-if="isCheckbox"
            style="display: flex; flex-direction: column"
          >

            <el-checkbox
              v-for="(obj, index) in formData.options"
              :key="index"
              :label="index"

            >{{obj.code}}
              <el-input
                v-model="obj.title"
                style="width: 247px;"
                type="text"
              ></el-input>
              <el-upload
                class="avatar-uploader"
                action="#"
                style="margin-left: 270px"
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-checkbox>
            <el-button
              style="width: 120px"
              type="danger"
              :disabled="disabled"
              size="small"
              @click="btnAdd(selected.length)"
            >+增加选项与答案</el-button>
          </el-checkbox-group>

        </el-form-item>
        <!-- 视频解析 -->
        <el-form-item label="解析视频：">
          <el-input
            v-model="formData.videoURL"
            type="text"
            style="width: 380px"
          ></el-input>
        </el-form-item>
        <!-- 答案解析 -->
        <el-form-item
          label="答案解析："
          prop="answer"
        >
          <quill-editor
            class="editor"
            style="margin-left: 82px;"
            v-model="formData.answer"
            ref="myQuillEditor"
            :options="editorOption"
          >
          </quill-editor>
        </el-form-item>
        <!-- 题目备注 -->
        <el-form-item label="题目备注：">
          <el-input
            v-model="formData.remarks"
            type="textarea"
            style="width: 380px"
            rows="3"
          ></el-input>
        </el-form-item>
        <!-- 试题标签 -->
        <el-form-item label="试题标签：">
          <el-select
            v-model="formData.tags"
            placeholder="请选择试题标签"
            style="width: 380px"
          >
            <el-option
              v-for="(obj,index) in tagList"
              :key="index"
              :label="obj.label"
              :value="obj.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 提交按钮 -->
        <el-form-item>
          <el-button
            :type="formData.id ? 'success' : 'primary'"
            @click="btnOk"
          >{{formData.id ? '确认修改' : '确认提交'}}</el-button>

        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects.js'
import { simple2 } from '@/api/hmmm/directorys.js'
import { list } from '@/api/hmmm/companys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { direction } from '@/api/hmmm/constants.js'
import { simpleTag } from '@/api/hmmm/tags.js'
import { add, update, detail } from '@/api/hmmm/questions.js'
export default {
  data () {
    return {
      // 定义一个单选数据结构
      selected: ['A', 'B', 'C', 'D'],
      selectAll: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      optionsAll: { title: '', img: '', isRight: false },
      // 用来接收添加的题库
      formData: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 地区
        direction: '', // 方向
        questionType: '', // 题型
        difficulty: '', // 难度
        question: '', // 题干
        options: [
          { code: 'A', img: '', title: '', isRight: false },
          { code: 'B', img: '', title: '', isRight: false },
          { code: 'C', img: '', title: '', isRight: false },
          { code: 'D', img: '', title: '', isRight: false }
        ],
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '' // 试题标签
      },

      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'change' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'change' }],
        enterpriseID: [{ required: true, message: '请选择企业', trigger: 'change' }],
        province: [{ required: true, message: '请选择地区', trigger: 'change' }],
        city: [{ required: true, message: '请选择地区', trigger: 'change' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'change' }],
        questionType: [{ required: true, message: '请选择题型', trigger: 'change' }],
        difficulty: [{ required: true, message: '请选择难度', trigger: 'change' }],
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入答案解析', trigger: 'blur' }]
      },
      // 富文本编辑样式
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            // [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            // [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            // [{ indent: '-1' }, { indent: '+1' }], // 缩进
            // [{ direction: 'rtl' }], // 文本方向
            // [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
            // [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
            // [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: ['songti'] }], // 字体种类
            // [{ align: [] }], // 对齐方式
            // ['clean'], // 清除文本格式
            ['image', 'video'] // 链接、图片、视频
          ]
        },
        placeholder: ''
      },
      isShow: true,
      isCheckbox: false,
      disabled: true,
      hidden: true,
      subjectList: [], // 学科列表
      directoryList: [], // 目录列表
      companyList: [], // 企业列表
      provinceList: provinces(), // 城市列表
      cityList: [], // 市区列表
      directionList: direction, // 方向
      tagList: [], // 标签
      Page: {
        page: 1,
        pages: '',
        pagesize: 10,
        counts: ''
      },
      list: []
    }
  },
  watch: {
    selected (newVal) {
      // console.log(item)
      this.formData.options.forEach(function (item) {
        console.log(item)
        item.isRight = false
      })
      this.formData.options[newVal].isRight = true
      console.log(newVal)
    }
  },
  created () {
    this.simpleSubject()
    this.companyList1()
    this.edit()
  },
  methods: {
    // 单选
    btnRadio () {
      this.isShow = true
      this.isCheckbox = false
      this.disabled = true
      this.hidden = true
    },
    // 多选
    btnCheckbox () {
      this.isShow = false
      this.isCheckbox = true
      this.disabled = false
      this.hidden = true
    },
    // 简答
    isAnswer () {
      this.isShow = false
      this.isCheckbox = false
      this.hidden = false
    },
    // 获取学科
    async simpleSubject () {
      const { data } = await simple()
      // console.log(data)
      this.subjectList = data
    },
    // 获取企业列表
    async companyList1 () {
      const { data } = await list()
      // console.log(data)
      this.companyList = data.items
    },
    // 获取城市列表
    changeFn () {
      this.cityList = citys(this.formData.province)
      console.log(this.cityList)
    },

    // 多选添加选项
    btnAdd (index) {
      // 先获取到原来数组长度,再追加到数组中
      this.selected.push(this.selectAll[index])
      console.log(this.selected)
      // 点击追加到定义的多选框数据里
      this.formData.options.push({ code: `${this.selectAll[index]}`, ...this.optionsAll })
    },
    async edit () {
      // await detail({ id: 37 })
      const { data } = await detail({ id: this.$route.params })
      this.formData = data
      console.log(data)
    },
    // 提交表单数据
    async btnOk () {
      await this.$refs.formFn.validate()
      try {
        if (this.formData.id) {
          // // 修改数据
          const data = await update({ id: this.$route.params, ...this.formData })
          console.log(data)
          this.$router.push('list')
        } else {
          // 基础题库添加 试题录入
          const data = await add(this.formData)
          console.log(data)
          this.$router.push('list')
        }
      } catch (error) {
        console.log(error)
      }
    },

    // 学科下拉列表
    async changeList () {
      const { data } = await simple2({ subjectID: this.formData.subjectID })
      this.directoryList = data
      // 获取标签列表
      const res = await simpleTag({ subjectID: this.formData.subjectID })
      // console.log(res)
      this.tagList = res.data
    }

  }
}
</script>

<style scoped lang='scss'>
.box-card {
  margin: 32px 25px;
}
.el-form-item {
  margin-left: 50px;
}
.editor {
  line-height: normal !important;
  height: 200px;
  width: 380px;
  margin-bottom: 50px;
  margin-left: 53px;
}

.el-row {
  margin-bottom: 20px;
}
::v-deep.avatar-uploader {
  width: 100px;
  height: 60px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-top: -50px;
  margin-left: 300px;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
</style>
